<style>
.jd {
	padding-left: 13px;
	padding-top:28px;
	padding-bottom: 41px;
	display: none;
}
.jd-name a{
	font-size: 20px;
    color: #000000;
}
.jd-tel {
	margin-top: 16px;
    font-size: 14px;
    color: #555;
}
.jd-addr {
	margin-top: 18px;
    font-size: 14px;
    color: #555;
}

.jd-desc {
	margin-top: 32px;
    font-size: 16px;
    color: #666;
    width: 386px;
    height: 290px;
    line-height: 25px;
    word-wrap: break-word;
}
</style>
<div class="container1100 clearfix" style="height: 450px;margin-top: 35px;">
   <div style="width: 700px;float: left;">
   		<div class="swiper-container" style="width:700px;height: 450px;">
		  <div class="swiper-wrapper">
		  	<#if jdList??>
		  	<#list jdList as jd>
		  		<a target="_blank" href="cms.action?serviceArea&id=${(jd.id)!}" class="swiper-slide" style="background:url(${(jd.imgUrl)!}) no-repeat;"></a>
		  	</#list>
		  	</#if>
  		  </div>
		   <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
		</div>
		
   </div>
   <div style="width: 400px;float: left;">
  		<#if jdList??>
	  	<#list jdList as jd>
	  		<div class="jd" id="jd${jd_index}">
   			<p class="jd-name">
   				<a target="_blank" href="cms.action?serviceArea&id=${(jd.id)!}">${(jd.name)!}</a>
   			</p>
   			<p class="jd-tel">
   				${(jd.tel)!}
   			</p>
   			<p class="jd-addr">
   				${(jd.locationName)!}
   			</p>
   			<p class="jd-desc">
				${(jd.serviceDesc)!}
   			</p>
   		</div>
	  	</#list>
	  	</#if>
   </div>
</div>

<script> 
function showJdContent(index) {
	$(".jd").hide();
	$("#jd"+index).show();
}

var mySwiper = new Swiper('.swiper-container', {
	autoplay: 5000,
	width:700,
	height:450,
	onSlideChangeEnd: function(swiper){
		console.log(swiper.activeIndex) //切换结束时，告诉我现在是第几个slide
		showJdContent(swiper.activeIndex);
	},
	pagination: '.swiper-pagination',
       paginationClickable: true,
});
$(".swiper-container").mouseenter(function () {//滑过悬停
    mySwiper.stopAutoplay();//mySwiper 为上面你swiper实例化的名称
}).mouseleave(function(){//离开开启
    mySwiper.startAutoplay();
});
showJdContent(0);


</script>